<style>

</style>
<template>
    <div>
        <ly-tip type="success">
            <p>
                极致用户体验，多维度收集环境信息，用户只需轻点即可通过验证,主要用于用户登录场景
            </p>
            <p>
                正常用户首次使用时都会出现滑动(文字点选等)验证,第二次使用会根据环境表单数据进行智能验证
            </p>
        </ly-tip>
        <el-tabs v-model="verifyType" type="card">
            <el-tab-pane label="独立验证按钮" name="a">
                <el-form style="width: 412px;padding-top: 10px" label-width="125px">
                    <el-form-item label="账号" prop="name">
                        <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="desc">
                        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="desc">
                        <div ref="verify-container"></div>
                        <ly-form-tip>如果第一次出现了滑块验证,请完成验证后,刷新下当前页面体验无感验证</ly-form-tip>

                    </el-form-item>
                    <el-form-item label="" prop="desc">
                        <el-button style="width: 286px" type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="绑定自有验证按钮" name="v">
                <el-form style="width: 412px;padding-top: 10px" label-width="125px">
                    <el-form-item label="账号" prop="name">
                        <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="desc">
                        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="desc">
                        <el-button ref="verify-button" @click="toLogin" style="width: 286px" type="primary">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

        <h3>前端使用</h3>
        <ly-code-view>
                <pre v-pre>

             var verify=LyVerify.slide({
                        sense: true,
                        sense_scene:'login',
                        container: me.$refs['verify-container'],
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        senseUrl: '/captcha/senseCheck',
                        hidePanel: true,
                        checkParams: function () {
                            return me.form;
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {
                            console.log('slide', 'success', rs);
                        }
                    });

            //verify.show(el)
            //verify.reset()
            </pre>
        </ly-code-view>
        <ly-markdown>
              <pre v-pre>
        #### 构造方法
        | 方法 |说明 | 参数|
        | ------------ | ------------ | ------------ |
        | LyVerify.slide(config) | 滑动验证 | 配置项 |
        | LyVerify.text(config) | 文字点选验证 | 配置项 |
        | LyVerify.move(config)  | 移动验证| 配置项 |
        | LyVerify.rotate(config)  | 旋转验证 | 配置项 |


        #### 配置项
        | 属性名 |说明 | 类型|默认值|
        | ------------ | ------------ |------------ |------------ |------------ |
        | sense | 开启无感知验证 |boolean |false |
        | sense_scene| 无感知验证的场景,不同页面的 值理论上不同 |string ||
        | container | 组件渲染容器 为空时 需要自己调用 show 方法显示 |boolean||
        | codeUrl | 组件编码路径 |string |/captcha/slideCode|
        | checkUrl | 校验路径 |string |/captcha/slideCheck |
        | senseUrl | 无感检验路径 |string |/captcha/senseCheck |
        | hidePanel | 当值为 true 时为触发式,只显示滑块或触发按钮 |boolean |false|
        | checkParams | 参与校验的表单数据,当开启无感时不可以为空 |function 返回值 object |return {}|
        | success | 成功回调 |function |- |
        | fail | 失败回调 |function |- |

      #### 对象方法
       | 方法 |说明 | 参数|
        | ------------ | ------------ |------------ |
        | show(el) | 显示验证码 只有container:false 时有效 |el:相对显示的dom |
        | reset()| 重置验证码 |-|
        | hide() | 移除验证码 |-|

       ### 成功回调
       | 方法 |说明 |
       | ------------ | ------------ |
       | rs.token | 用户提交表单后台验证|
              </pre>
        </ly-markdown>

        <h3>服务端使用</h3>
        <ly-code-view>
            <pre v-pre>
                rapphp 框架下
                依赖包 ly_lib/captcha :2.0 以上
                rapphp 会自动注册 controller
                $val=LyVerify::checkToken($token);

                非rapphp框架下或分布式下
                可以将项目独立部署为一个应用
                应用内 通过 http 请求下面地址 完成验证
                /captcha/checkToken?token=xxxx


            </pre>
        </ly-code-view>
    </div>


</template>
<script>
    Rap.define("index", [], function () {
        return {
            data: function () {
                return {
                    verifyType: 'a',
                    form: {
                        account: '藤之内',
                        password: '123456',
                    }
                }
            },
            mounted: function () {
                var me = this;
                Rap.loadCss('/static/ly/libs/lyverify/index.css');
                Rap.insertScript([
                    "/static/ly/libs/lyverify/index.js"]).then(function () {
                    me.verify = LyVerify.slide({
                        sense: true,
                        sense_scene: 'login',
                        container: me.$refs['verify-container'],
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        senseUrl: '/captcha/senseCheck',
                        hidePanel: true,
                        checkParams: function () {
                            return me.form;
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {
                            console.log('slide', 'success', rs);
                            //继续你的业务
                        }
                    });
                    me.verify1 = LyVerify.slide({
                        sense: true,
                        sense_scene: 'login',
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        senseUrl: '/captcha/senseCheck',
                        hidePanel: true,
                        checkParams: function () {
                            return me.form;
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {
                            var token = rs.token;
                            //继续你的业务
                            console.log('slide', 'success', rs);
                            App.$message({message: '验证成功,这里继续完成业务', type: 'success'});
                        }
                    });
                })
            },
            methods: {
                toLogin: function () {
                    // this.verify1.reset() 可以重置
                    this.verify1.show(this.$refs['verify-button'].$el);
                }
            }
        }
    })
</script>